<template>
	<div class="drawer" ref="drawerContainer">
		<div :class="maskClass" @click="closeByMask"></div>
		<div :class="mainClass" :style="mainStyle" class="main" >
			<div class="drawer-head">
				<span>{{ props.title }}</span>
				<span class="close-btn" v-show="props.closable" @click="closeByButton">X</span>
			</div>
			<div class="drawer-body"><slot /></div>
		</div>
	</div>
</template>

<script setup>
	import {defineProps,ref,onMounted,computed,defineEmits} from 'vue';
	const drawerContainer = ref();
	const emits = defineEmits(['update:display']);
	const props = defineProps({
		// 是否打开
		display: {
			type: Boolean
		},

		// 标题
		title: {
			type: String,
			default: '标题'
		},

		site: {
			type: String,
			default: 'left'
		},

		// 是否显示关闭按钮
		closable: {
			type: Boolean,
			default: true
		},

		// 是否显示遮罩
		mask: {
			type: Boolean,
			default: true
		},

		// 是否点击遮罩关闭
		maskClosable: {
			type: Boolean,
			default: true
		},

		// 宽度
		width: {
			type: String,
			default: '200px'
		},

		// 是否在父级元素中打开
		inside: {
			type: Boolean,
			default: false
		},
	});
	onMounted(()=> {
		if (props.inside) {
			let box = drawerContainer.value.parentNode;
			box.style.position = 'relative';
		}
	});
	const maskClass = computed(()=>{
		return {
			'mask-show': props.mask && props.display,
			'mask-hide': !(props.mask && props.display),
			inside: props.inside
		};
	});
	const mainClass  = computed(()=>{
		return {
			'main-show': props.display,
			'main-hide': !props.display,
			inside: props.inside
		};
	});
	const mainStyle = computed(()=>{
		if (props.site === 'left') {
			return {
				width: props.width,
				left: props.display ? '0' : `-${props.width}`,
				borderLeft: props.mask ? 'none' : '1px solid #eee'
			};
		}
		if (props.site === 'right') {
			return {
				width: props.width,
				right: props.display ? '0' : `-${props.width}`,
				borderLeft: props.mask ? 'none' : '1px solid #eee'
			};
		}
		if (props.site === 'top') {
			return {
				height: props.display ? props.width:'0' ,
				width: '100%',
				top: props.display ? '0' : `-${props.width}`,
				borderLeft: props.mask ? 'none' : '1px solid #eee'
			};
		}
		if (props.site === 'bottom') {
			return {
				height: props.display ? props.width:'0' ,
				width: '100%',
				bottom: props.display ? '0' : `-${props.width}`,
				borderLeft: props.mask ? 'none' : '1px solid #eee'
			};
		}
		return {
			width: props.width,
			left: props.display ? '0' : `-${props.width}`,
			borderLeft: props.mask ? 'none' : '1px solid #eee'
		};
	});
	
	const closeByMask = function() {
		props.maskClosable && emits('update:display', false);
	}
	const closeByButton = function() {
		emits('update:display', false);
	}
</script>

<style lang="less" scoped>
.drawer {
	height: 100%;
	height: 100%;
	/* 遮罩 */
	.mask-show {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 1;
		transition: opacity 0.5s;
	}
	.mask-hide {
		opacity: 0;
		transition: opacity 0.5s;
	}

	/* 滑块 */
	.main {
		position: fixed;
		z-index: 10;
		top: 0;
		height: 100%;
		background: #fff;
		transition: all 0.5s;
	}
	.main-show {
		opacity: 1;
	}
	.main-hide {
		opacity: 0;
	}

	/* 某个元素内部显示 */
	.inside {
		position: absolute;
	}

	/* 其他样式 */
	.drawer-head {
		display: flex;
		justify-content: space-between;
		height: 45px;
		line-height: 45px;
		padding: 0 15px;
		font-size: 14px;
		font-weight: bold;
		border-bottom: 1px solid #eee;
		.close-btn {
			display: inline-block;
			cursor: pointer;
			height: 100%;
			padding-left: 20px;
		}
	}
	.drawer-body {
		font-size: 14px;
		padding: 15px;
	}
}
</style>
